iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

Vue.js 初學筆記系列 第 2

02. Vue 的聲明式渲染、樣板與資料

  • 分享至 

  • xImage
  •  

Vue 的響應性

Vue 會自行觀察物件內變化,在第一時間產生 HTML 與更新 DOM。比起 jQuery 的命令式渲染,開發者只需要專注在視圖層的表現,而不需一步一步地告訴瀏覽器說「你要先做什麼,設定好,如果怎麼樣,再搬去哪裡。」聲明式渲染在 Vue 的功能下已經負責了許多背後需要處理的程序,物件變動時 data 物件中的每個屬性會自動被 getter 與 setter 代替。

【可以先知道,以後再回頭看的注意事項】
但是 Vue 實體初始化之後,只有現存屬性才有響應性。後續的程式如果直接加入新的屬性,不會具有響應性。所以至少要事先定義該你希望新增的屬性並設值為空或 undefined

命令式渲染與聲明式渲染的概念差異

  • 命令式渲染 - 我一步一步告訴程式去哪裡、拿什麼資料出來、如果觀測到資料變化、再放到哪裡去
  • 聲明式渲染 - 我覺得程式應該要做到什麼,程式直接做出效果就好

再舉個更生活化一點的例子

  • 命令式渲染 - 請你去倉庫拿顆精靈球,擺在店裡的桌上,如果觀測到有客人想買,跟他收取 200 遊戲幣,你再把桌上這顆精靈球給他
  • 聲明式渲染 - 請你做精靈球的銷售,售價 200 遊戲幣

友好商店 「一顆抓不到?那就買十顆!」


樣板與資料

讓我們先看第一個 Vue 實體範例,結構部分於後續詳解。

<div id="app">
  <p>歡迎來到{{ shopName }}!</p>
  <p>現在買 {{ onSaleAmount }} 顆{{ ball[0] }} 
    <span style="color:red">送 1 顆{{ ball[3] }}!</span>
  </p>
</div>
var vm = new Vue({ 
  el:'#app', 
  data:{ 
    shopName: '友好商店',
    onSaleAmount: 10,
    ball: ['精靈球','超級球','高級球','紀念球']
  }
})

app
瀏覽器上的呈現效果如圖。第一個引起人注意的應該是, HTML 並不會寫出「歡迎來到{{ shopName }}」,而是依據 Vue 實體中的資料,透過插值的方式,成為對應的字串「友好商店」。

HTML 中的樣板(templates)

Vue 會將實體內的資料呈現在網頁上。這需要透過必要的結構一起合作。
第一個必要的結構是 HTML 的樣板

<div id="app"> <!-- 樣板(templates) -->
    ...
</div>

HTML 依然提供鷹架的工作,而要讓 Vue 來操作這鷹架上的內容時,應給予 id 的識別與綁定。

Vue 實體與其中的資料(data)

var vm = new Vue({ // 宣告一個 vue 實體。
  el:'#app',
  data:{
    ...
  }
})
  • Vue實體 - 若無重要目的,通常以 vmapp 宣告, vm 代表 viewmodel
  • el - 綁定 HTML 檔的標籤,這說明「 HTML 裡 idappdiv 由我來操控」;反過來說,id 不是 appdiv 都不歸我這個 Vue 實體操作。
  • data - 資料,是一個物件,負責我們在樣板的插值中想顯示的資料,插值以雙大括號寫在 HTML 中,並與 data 中的同名對應屬性單向綁定。屬性可以賦予各種型別的值:數值(10)、字串(友好商店)、布林值、陣列(各種精靈球)、物件都是可行的。

這是 Vue 實體最低限度、必要的結構,但精華在於透過指令操作實體中的資料,讓網頁依據條件判斷與呈現不同的內容。往後篇章會詳述指令的部分。

回到友好商店的 app 示例。如果今天中秋節,友好商店決定推出促銷活動:「中秋快閃活動購物送好禮急速手刀搶購優惠中,買 8 顆精靈球改送 1 顆超級球。」我必須做在文件中達成以下效果。

  1. 優惠達標的門檻的從 10 顆改成 8 顆
  2. 紀念球 改成 超級球
<div id="app">
  <p>歡迎來到{{ shopName }}!</p>
  <p>現在買 {{ onSaleAmount }} 顆{{ ball[0] }} 
    <span style="color:red">送 1 顆{{ ball[1] }}!</span>
    <!-- 從 ball 陣列的值中的第 4 個元素改成第 2 個元素(ball[3] 改成 ball[1])-->
  </p>
</div>
var vm = new Vue({ 
  el:'#app', 
  data:{ 
    shopName: '友好商店',
    onSaleAmount: 8, /* 從 10 改成 8 */
    ball: ['精靈球','超級球','高級球','紀念球']
  }
})

app_超級球

  • {{ onSaleAmount }}dataonSaleAmount 單向綁定
  • {{ ball[1] }}指向 databall 陣列的第 2 個元素

有了結構上的認識之後,往後就可以透過指令、methods與計算屬性,做更多資料的操控。
今天的程式碼在這個 codepen 裡,此文諸多不周到的地方還請各方大大多多包涵指教。

友好商店 「祝大家中秋節快樂~」


上一篇
01. Vue 就決定是你了!
下一篇
03. Vue 指令:v-text, v-html, v-bind
系列文
Vue.js 初學筆記10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
chunwen
iT邦新手 3 級 ‧ 2019-09-20 15:25:56

寫得很清楚,淺顯易動~

立早三 iT邦新手 5 級 ‧ 2019-09-20 23:24:55 檢舉

謝謝,但真的很多不周到的地方,這也只算是個自我挑戰的筆記
還請參考這裡之餘,也一定要看看各方大大怎麼講解的,以免被我的錯誤觀念(儘管我很努力精進與釐清了)誤導

chunwen iT邦新手 3 級 ‧ 2019-09-21 13:56:22 檢舉

一起加油吧!

我要留言

立即登入留言